////
/// Components
/// Block
////

@import 'utils/shared/functions';
@import 'utils/shared/layout';

.BlockWrapper {
  .Block {
    height: 100%;
  }
}

.Block {
  position: relative;
  display: block;
}

///
/// Block Content
.BlockContent {
  @include flex-center;
  position: relative;
  min-height: rows(2, true);
  height: 100%;
  color: white;
  background-color: get-color(coal, dark);
  border: get-border(thin) solid get-color(coal, dark);

  @media screen and (min-width: get-breakpoint(tablet)) {
    min-height: rows(2);
    border-width: get-border();
  }

  .Heading {
    // vertical alignment
    margin-top: -0.1em;
  }
}

@import 'variants';
